<script setup>
import { onBeforeUnmount, onMounted, onUnmounted, ref } from "vue";
import headers from "~/src/components/headers.vue";
import asides from "~/src/components/asides.vue";
import {
  getBannerAPI,
  getUserInfoAPI,
  getArticleAPI,
  getNearListAPI,
  getHotAuthorAPI,
  getPushingMessageAPI,
  readMessageAPI,
  readAllMessageAPI,
  clearReadMessageAPI,
} from "@/apis/home";
import { logoutAPI } from "../../apis/login";
import { searchUserAPI } from "../../apis/user";
// import './home.scss'
import { useRouter } from "vue-router";
import useDataStore from "~/src/store";
import { storeToRefs } from "pinia";
import { isScrolledToBottom, throttle, timeAgo } from "~/src/utils/tool";
import typeHeader from "./components/typeHeader.vue";

const dataStore = useDataStore();

const router = useRouter();

defineOptions({
  name: "Home",
});

const { userInfo, isLogin, messageList, notReadCount, isMobile } =
  storeToRefs(dataStore);

let bannerList = ref([]);
let bannerIndex = ref(0); //当前banner小图的索引
let bannerWrap = ref(null); //banner容器对象
let articleList = ref([]);
let page = ref(1);
let lastTime = 0; // 上一次执行getArticle函数时候的时间戳，用于节流
let activeName = ref("0");
let nearList = ref([]); //最近更新列表
let hotAuthorList = ref([]); //全站热度作者列表
let typeHeaderFlag = ref(false);
let messagePopupShow = ref(false); // 消息推送列表弹窗
// let messageNotReadCount = ref(0)    // 消息未读数量
let messageDetail = ref({}); //消息详情
let messageDetailDialogShow = ref(false); // 消息详情对话框
let scrollTop = ref(0); //当前滚动高度
let mobileHeaderShow = ref(true); // 是否展示mobileheader
let searchUserPopupShow = ref(false); // 查找用户列表弹窗
let searchUserValue = ref(""); // 查找用户列表弹窗输入内容
let searchUserList = ref([]); // 查找到的用户列表

onMounted(() => {
  // router.go(0)
  console.log("env", import.meta.env.BASE_URL);
  getBanner();
  getArticle(0, page.value);
  getHotAuthorList();
  getNearList();
  getPushingMessage();
});

onBeforeUnmount(() => {
  window.removeEventListener("scroll", scrollHandler);
});

/* ------------------------------- 获取banner列表 ------------------------------- */
const getBanner = async () => {
  let { data } = await getBannerAPI();
  bannerList.value = data;
};

/* ------------------------------- 点击切换banner ------------------------------- */

// 点击小图切换大图的索引
const changeBannerIndexAction = (id) => {
  bannerIndex.value = id - 1;
  bannerWrap.value.setActiveItem(bannerIndex.value);
  bannerWrap.autoplay = true;
};
const bannerChangeAction = (idx) => {
  bannerIndex.value = idx;
};

/* ------------------------- 获取当前用户的信息 ------------------------ */
// let userInfo = JSON.parse(localStorage.getItem('userInfo'))
// let userInfo = ref()
// const getUserInfo = async () => {
//     let data = await getUserInfoAPI(user_id)
//     if (data.code === 200) {
//         userInfo.value = data.data[0]
//     }
// }
// getUserInfo()

const btnAction = () => {
  if (isLogin.value) {
    router.push({ name: "user" });
    active.value = headersNavList.value.length + 1;
  } else {
    router.push({ name: "login" });
  }
};

/* -------------------------------- 请求所有文章数据 -------------------------------- */

const getArticle = async (type_id, page) => {
  let data = await getArticleAPI(type_id, page);
  if (data.code === 200) {
    data.data.forEach((item) => {
      item.article_publish_time = timeAgo(item.article_time);
    });
    const result = [...articleList.value, ...data.data];
    articleList.value = result.map((item) => {
      return {
        ...item,
        coverImg: item.article_coverimg.split(",")[0],
      };
    });
  }
};

/* --------------------------------- 点击切换分类项 -------------------------------- */

const changeAction = (navIdx) => {
  activeName.value = navIdx;
  articleList.value = [];
  page.value = 1;
  getArticle(navIdx, page.value);
};

/* --------------------------------- 点击进入详情页 -------------------------------- */
const toDetailAction = (article_id, user_id) => {
  router.push({ name: "article", query: { article_id, user_id } });
};

/* ------------------------------- 滚动事件------------------------------ */
const scrollHandler = () => {
  if (document.documentElement.scrollTop >= 400) {
    if (!typeHeaderFlag.value) {
      typeHeaderFlag.value = true;
    }
  } else {
    if (typeHeaderFlag.value) {
      typeHeaderFlag.value = false;
    }
  }
  if (document.documentElement.scrollTop > scrollTop.value) {
    mobileHeaderShow.value = false;
  } else {
    mobileHeaderShow.value = true;
  }
  scrollTop.value = document.documentElement.scrollTop;

  // 滚动到底部加载更多文章
  // 当页面滚动到底部 且 这次执行getArticle的事件戳与上一次执行getArticle的时间戳相差500以上才能执行
  if (
    isScrolledToBottom(document.documentElement) &&
    new Date().getTime() - lastTime > 500
  ) {
    page.value++;
    getArticle(0, page.value);
    lastTime = new Date().getTime(); // 把这次时间戳变成上次时间戳，用于下次的对比
  }
};
window.addEventListener("scroll", scrollHandler);

/* --------------------------------- 最近更新板块 --------------------------------- */
const getNearList = async () => {
  let data = await getNearListAPI();
  if (data.code === 200) {
    nearList.value = data.userResult;
  }
};

// 点击手动刷新最近更新板块
const refreshNearAction = () => {
  getNearList();
};

/* --------------------------------- 点击退出登录 --------------------------------- */
const logoutAction = () => {
  ElMessageBox.confirm("确定要退出登录吗?", "退出登录", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await logoutAPI(userInfo.value.user_id);
    if (res.code === 200) {
      sessionStorage.removeItem("data");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("isLogin");
      setTimeout(() => {
        router.go(0);
      }, 2000);

      ElMessage({
        message: "退出登录成功",
        type: "success",
      });
    } else {
      ElMessage({
        type: "error",
        message: "退出登录失败",
      });
    }
  });
};

/* ------------------------------- 点击跳转到用户个人空间页面 ------------------------------ */
const toMeAction = (type) => {
  router.push({
    name: "me",
    query: { user_id: userInfo.value.user_id, meType: type },
  });
};

/* --------------------------------- 跳转到留言板 --------------------------------- */
const toMessageBoardAction = () => {
  router.push({ name: "messageBoard" });
};

/* -------------------------------- 获取全站热度作者 -------------------------------- */
const getHotAuthorList = async () => {
  let res = await getHotAuthorAPI();
  if (res.code === 200) {
    hotAuthorList.value = res.data;
  }
};

/* -------------------------------- 打开消息列表弹窗 -------------------------------- */
const showMessagePopup = () => {
  messagePopupShow.value = true;
};

/* -------------------------------- 初始化消息推送列表 ------------------------------- */
const getPushingMessage = async () => {
  let res = await getPushingMessageAPI(userInfo.value.user_id);
  if (res.code === 200) {
    let messageDataList = res.data.messagePushingData;
    // messageNotReadCount.value = res.data.notReadCount
    dataStore.setMessageList(messageDataList);
  } else if (res.code === 400) {
    dataStore.setMessageList([]);
  }
};

/* ---------------------------------- 消息已读 ---------------------------------- */
const readMessageAction = async (message_id) => {
  messageDetail.value = messageList.value.find(
    (item) => item.message_id === message_id
  );
  messageDetailDialogShow.value = true;
  let res = await readMessageAPI(message_id);
  if (res.code === 200) {
    getPushingMessage();
  }
};

/* ---------------------------------- 全部已读 ---------------------------------- */
const allReadAction = async () => {
  let res = await readAllMessageAPI(userInfo.value.user_id);
  if (res.code === 200) {
    ElMessage({
      message: "消息状态已更新",
      type: "success",
    });
    getPushingMessage();
  }
};

/* --------------------------------- 清空已读消息 --------------------------------- */
const clearReadAction = async () => {
  let res = await clearReadMessageAPI(userInfo.value.user_id);
  if (res.code === 200) {
    ElMessage({
      message: "已清空所有已读消息",
      type: "success",
    });
    getPushingMessage();
  }
};

// 打开查找用户弹窗
const searchUser = () => {
  searchUserPopupShow.value = true;
};

//
const searchUserAction = async () => {
  let res = await searchUserAPI(searchUserValue.value);
  if (res.code === 200) {
    searchUserList.value = res.userData;
  } else {
    searchUserList.value = [];
  }
};

// 弹窗关闭时
const searchUserClose = () => {
  searchUserValue.value = "";
  searchUserList.value = [];
};

const toUserAction = (user_id) => {
  router.push({ name: "me", query: { user_id } });
};
</script>

<template>
  <div class="page">
    <div
      v-if="!isMobile"
      class="headers"
      :style="{
        transform: typeHeaderFlag ? 'translateY(0px)' : 'translateY(-81px)',
      }"
    >
      <typeHeader
        :activeName="activeName"
        @typeChange="changeAction"
      ></typeHeader>
    </div>
    <div class="container">
      <!-- 文章类型header -->

      <!-- 移动端header -->
      <div
        class="mobileHeaders-box"
        :style="{
          transform: mobileHeaderShow ? 'translateY(0px)' : 'translateY(-50px)',
        }"
        v-if="isMobile"
      >
        <div class="mobileHeaders">
          <div class="mobileHeaders-left" @click="btnAction">
            {{ isLogin ? `欢迎 , ${userInfo.user_name}` : "请登录" }}
          </div>
          <div class="mobileHeaders-mid"></div>
          <div class="mobileHeaders-right" v-if="isLogin">
            <div class="right-icon">
              <el-icon @click="showMessagePopup">
                <ChatDotSquare />
              </el-icon>
              <div class="dot" v-if="notReadCount">{{ notReadCount }}</div>
            </div>
            <div class="right-icon">
              <i @click="logoutAction" class="iconfont icon-kaiguan"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="temp" v-if="!isMobile"></div>
      <div class="main">
        <div class="main-top">
          <div class="top-left">
            <div class="top-left-banner">
              <el-carousel
                ref="bannerWrap"
                :direction="isMobile ? 'horizontal' : 'vertical'"
                :trigger="isMobile ? 'click' : 'hover'"
                :arrow="isMobile ? 'always' : 'never'"
                :interval="3000"
                motion-blur
                :initial-index="bannerIndex"
                :autoplay="true"
                @change="bannerChangeAction"
              >
                <el-carousel-item
                  v-for="item in bannerList"
                  :key="item.banner_id"
                  :name="item.banner_id + ''"
                >
                  <div>
                    <div class="img-text">{{ item.banner_text }}</div>
                    <img :src="item.banner_path" alt="" />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="top-left-img" v-if="!isMobile">
              <div
                :class="{ noActive: item.banner_id - 1 !== bannerIndex }"
                @click="changeBannerIndexAction(item.banner_id)"
                v-for="item in bannerList"
                :key="item.banner_id"
              >
                <img :src="item.banner_path" alt="" />
              </div>
            </div>
          </div>
          <div class="top-right" v-if="!isMobile">
            <div class="top-right-poster"></div>
            <div class="top-right-user" ref="topRightUserRef">
              <div class="user-info">
                <div class="user-img" v-if="isLogin">
                  <img :src="userInfo.user_avatar" alt="" />
                </div>
                <div class="user-img" v-else>
                  <img src="../../assets/images/default_avatar.png" alt="" />
                </div>
                <div class="user-name">
                  <div>{{ isLogin ? userInfo.user_name : "未登录" }}</div>
                  <div>{{ isLogin ? userInfo.user_email : "" }}</div>
                  <div>{{ isLogin ? userInfo.user_introduction : "" }}</div>
                </div>
                <div class="user-icon">
                  <i class="iconfont icon-pinglunxiao"></i>
                  <i class="iconfont icon-fenxiang" @click="searchUser"></i>
                </div>
              </div>
              <div class="user-option" v-if="isLogin">
                <div class="option-item" @click="toMeAction(1)">
                  <div>个人中心</div>
                </div>
                <div class="option-item" @click="showMessagePopup">
                  <div>我的消息</div>
                  <div
                    v-if="notReadCount"
                    style="
                      width: 20px;
                      height: 20px;
                      line-height: 20px;
                      text-align: center;
                      background-color: #8e8cd8;
                      color: white;
                      border-radius: 50%;
                      font-size: 12px;
                      margin-left: 5px;
                    "
                  >
                    {{ notReadCount }}
                  </div>
                </div>
                <div class="option-item" @click="toMessageBoardAction">
                  <div>留言板</div>
                </div>
                <div class="option-item" @click="logoutAction">
                  <div>退出登录</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="main-mid"></div> -->
        <div class="main-content">
          <div class="content-article">
            <el-tabs
              v-model="activeName"
              class="demo-tabs"
              @tab-change="changeAction"
              :stretch="true"
            >
              <el-tab-pane label="全部"></el-tab-pane>
              <el-tab-pane label="球鞋测评"></el-tab-pane>
              <el-tab-pane label="潮流穿搭"></el-tab-pane>
              <el-tab-pane label="实战利器"></el-tab-pane>
              <el-tab-pane label="休闲慢跑"></el-tab-pane>
              <el-tab-pane label="好物分享"></el-tab-pane>
              <el-tab-pane label="专业竞速"></el-tab-pane>
              <el-tab-pane label="谍照首发"></el-tab-pane>
              <el-tab-pane label="运动装备"></el-tab-pane>
            </el-tabs>
            <div class="article-main">
              <div
                @click="toDetailAction(item.article_id, item.article_author_id)"
                class="main-item"
                v-for="item in articleList"
                :key="item.article_id"
              >
                <div class="item-left">
                  <div class="left-title">{{ item.article_title }}</div>
                  <div
                    :class="{
                      'left-introduction': true,
                      'mobile-introduction': isMobile,
                    }"
                  >
                    {{ item.article_introduction }}
                  </div>
                  <div class="left-author">
                    <div class="author-name">
                      {{ item.user_name
                      }}<span>{{ item.article_publish_time }}</span>
                    </div>
                    <div class="author-lc">
                      <!-- <el-icon>
                                                <Pointer />
                                            </el-icon> -->
                      <div>
                        <i class="iconfont icon-dianzan_kuai"></i>
                        {{ item.article_like }}
                      </div>
                      <div>
                        <i class="iconfont icon-shoucang"></i>
                        {{ item.article_like }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="item-right">
                  <img :src="item.coverImg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="content-aside" v-show="!isMobile">
            <div class="hot">
              <div class="hot-title">
                <el-icon color="#8e8cd8">
                  <Timer />
                </el-icon>
                <div>全站作者热度</div>
              </div>
              <div class="hot-content">
                <div
                  class="hot-item"
                  v-for="item in hotAuthorList"
                  :key="item.user_id"
                >
                  <div class="itemAvatar">
                    <img :src="item.user_avatar" alt="" />
                  </div>
                  <div class="itemName">{{ item.user_name }}</div>
                  <div class="itemHot"><span>☀</span>{{ item.likeCount }}</div>
                </div>
              </div>
            </div>
            <div class="lately">
              <div class="lately-title" @click="refreshNearAction">
                <el-icon color="#8e8cd8">
                  <Timer />
                </el-icon>
                <div>
                  <el-tooltip
                    class="box-item"
                    effect="light"
                    content="点击刷新"
                    placement="top-start"
                  >
                    最近更新
                  </el-tooltip>
                </div>
              </div>
              <div
                class="lately-content"
                v-for="item in nearList"
                :key="new Date().getTime()"
              >
                <div class="content-item">
                  <div class="item-author">
                    <div class="author-img">
                      <img :src="item.user_avatar" alt="" />
                    </div>
                    <div class="author-text">
                      <div>{{ item.user_name }}</div>
                      <div>{{ item.user_email }}</div>
                      <div>动态数量：{{ item.articleResult.length }}</div>
                    </div>
                  </div>
                  <div class="item-article">
                    <div
                      class="article-item"
                      v-for="i in item.articleResult"
                      :key="i.article_id"
                    >
                      <i></i>
                      <div>{{ i.article_title }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flash">
              <div class="flash-title">
                <el-icon color="#8e8cd8">
                  <Dish />
                </el-icon>
                <div>鞋狗资讯</div>
              </div>
              <div class="flash-content">
                <div class="flash-item">
                  <div class="flash-item-time">
                    <div>昨天</div>
                    <div>17:40</div>
                  </div>
                  <div class="flash-item-title">
                    adidas「顶级排面」过气？打脸来了
                  </div>
                  <div class="flash-item-text">
                    <div>
                      你的童年记忆中，有 Y-3 吗？这个火遍 80
                      后青春的潮流符号（也很可能是出现在莆田鞋上），今年再次回归了。Y-3——阿迪达斯旗下高端运动品牌
                      ，最近发布了 2023
                      年春夏系列的第二个篇章。光看官方释出的宣传片和海报，就已经让人对这一一季新品充满遐想空间。
                    </div>
                    <div>
                      <span>原文链接</span>
                      <span
                        >分享到 <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-weixin"></i
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="flash-item">
                  <div class="flash-item-time">
                    <div>昨天</div>
                    <div>11:00</div>
                  </div>
                  <div class="flash-item-title">
                    Beats 前 CEO
                    做了款「音乐球鞋」，让你从脚开始感受「动次打次」
                  </div>
                  <div class="flash-item-text">
                    <div>
                      现场音乐的其中一个魅力在于「氛围感」。 Beats 前 CEO Susan
                      Paley 近日，Paley 的洛杉矶初创企业 DropLabs
                      推出了旗下第一代产品 EP 01。通过在球鞋中底设置振动装置，EP
                      01 可根据用户正在听的音乐或声音设计对应的振动方案。
                    </div>
                    <div>
                      <span>原文链接</span>
                      <span
                        >分享到 <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-weixin"></i
                      ></span>
                    </div>
                  </div>
                </div>
                <div class="flash-item">
                  <div class="flash-item-time">
                    <div>前天</div>
                    <div>17:00</div>
                  </div>
                  <div class="flash-item-title">
                    耐克将推出「NFC 球鞋」，但似乎是一个鸡肋的存在
                  </div>
                  <div class="flash-item-text">
                    <div>
                      还记得耐克在去年 NBA 赛季推出的 「NFC 球衣」吗？
                      只要用智能手机轻触球衣下方的 NFC 芯片，就可以实时浏览对应
                      NBA
                      球队和球员的数据、球赛精彩片段，甚至是球员灵魂深处的私人歌单。听起来有一丢丢的炫酷。
                    </div>
                    <div>
                      <span>原文链接</span>
                      <span
                        >分享到 <i class="iconfont icon-weibo"></i>
                        <i class="iconfont icon-weixin"></i
                      ></span>
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div class="flash-more"><a href="./html/flash.html">查看更多</a></div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 用户查找列表弹窗 -->
      <el-drawer
        v-model="searchUserPopupShow"
        direction="rtl"
        :size="isMobile ? '80%' : '30%'"
        @closed="searchUserClose"
      >
        <template #header>
          <div class="user-search">
            <el-input
              v-model="searchUserValue"
              size="large"
              placeholder="在这里输入搜索..."
              :prefix-icon="Search"
            ></el-input>
            <el-button
              color="#626aef"
              size="large"
              style="margin-left: 5px; border: none"
              @click="searchUserAction"
              ><el-icon>
                <Search /> </el-icon
            ></el-button>
          </div>
        </template>
        <template #default>
          <div class="user-list">
            <div
              class="user-item"
              v-for="item in searchUserList"
              :key="item.user_id"
            >
              <div class="item-top" @click="toUserAction(item.user_id)">
                <div class="top-avatar">
                  <img :src="item.user_avatar" alt="" />
                </div>
                <div class="top-info">
                  <div class="info-name">
                    {{ item.user_name
                    }}<span
                      :style="{
                        color: item.user_online === '1' ? '#00d861' : '#cccccc',
                        marginLeft: '20px',
                      }"
                      >●</span
                    >
                    <span class="online">{{
                      item.user_online === "1" ? " 在线" : " 离线"
                    }}</span>
                  </div>
                  <div class="info-email">{{ item.user_email }}</div>
                  <div class="info-focus">
                    <div class="focus">
                      <div class="focus-title">关注{{ item.fans }}</div>
                    </div>
                    <div class="focus">
                      <div class="focus-title">粉丝{{ item.follow }}</div>
                    </div>
                  </div>
                </div>
                <div class="top-count">
                  <div class="count-title">点赞收藏</div>
                  <div class="count-num">{{ item.count }}</div>
                </div>
              </div>
              <div class="item-bottom" v-if="item.article.length">
                <div class="bottom-title">最近发布</div>
                <div class="bottom-list">
                  <div
                    class="bottom-item"
                    v-for="i in item.article"
                    :key="i.article_id"
                  >
                    {{ i.article_title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </el-drawer>

      <!-- 消息列表弹窗 -->
      <el-drawer
        v-model="messagePopupShow"
        direction="rtl"
        :size="isMobile ? '80%' : '30%'"
      >
        <template #header>
          <h4>我的消息列表</h4>
        </template>
        <template #default>
          <div class="message-list">
            <div
              class="message-item"
              v-for="item in messageList"
              :key="item.message_id"
              @click="readMessageAction(item.message_id)"
            >
              <div class="item-avatar">
                <img :src="item.user_avatar" alt="" />
              </div>
              <div class="item-content">
                <div class="item-user">
                  <span v-if="item.message_read == '0'">[未读] </span>来自
                  {{ item.user_name }}
                </div>
                <div class="item-title">{{ item.message_title }}</div>
                <div class="item-text" v-if="item.message_content">
                  {{ item.message_content }}
                </div>
                <div class="item-time">{{ timeAgo(item.message_time) }}</div>
              </div>
              <div class="item-img" v-if="item.message_type != 'guanzhu'">
                <img :src="item.coverImg" alt="" />
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-popconfirm
              title="确定要清空全部已读消息吗？？"
              confirm-button-text="是的"
              cancel-button-text="取消"
              @confirm="clearReadAction"
            >
              <template #reference>
                <el-button plain>清空已读</el-button>
              </template>
            </el-popconfirm>
            <el-button
              color="#8e8cd8"
              plain
              type="primary"
              @click="allReadAction"
              >全部已读</el-button
            >
          </div>
        </template>
      </el-drawer>

      <!-- 消息详情对话框 -->
      <el-dialog
        v-model="messageDetailDialogShow"
        title="消息详情"
        :width="isMobile ? '90%' : '600'"
      >
        <template #default>
          <div class="detail">
            <div class="detail-top">
              <div class="top-avatar">
                <img :src="messageDetail.user_avatar" alt="" />
              </div>
              <div class="top-text">
                <div class="text-name">
                  {{ messageDetail.user_name }}
                  <span style="font-size: 13px; color: #ccc"
                    >({{ messageDetail.user_email }})</span
                  >
                </div>
                <div class="text-title">{{ messageDetail.message_title }}</div>
                <div class="text-time">
                  {{ timeAgo(messageDetail.message_time) }}
                </div>
              </div>
              <div class="top-img">
                <img :src="messageDetail.coverImg" alt="" />
              </div>
            </div>
            <div class="detail-mid" v-if="messageDetail.message_content">
              {{ messageDetail.message_content }}
            </div>
          </div>
        </template>
        <template #footer>
          <div class="dialog-footer">
            <el-button
              color="#8e8cd8"
              plain
              type="primary"
              @click="messageDetailDialogShow = false"
              >确定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url(./home.scss);
</style>
